"use strict";

/**
 * @auther wtfssd
 * Created by wtfssd on 2017/11/2
 */
import * as React from 'react'
import {commonStyles} from "../assets/styles/common";
import Avatar from "./Avatar";
import MyText from "./MyText";
import {commentStyles} from "../assets/styles/guide";
import Line from "./Line";
import {SCREEN_WIDTH} from "../constant";
import {CommentItemProps} from "./index";
import {dynamicStyles} from "../assets/styles/community";
import Colors from "../assets/styles/Colors";

const {connect} = require('react-redux');
const {View, TouchableOpacity} = require('react-native');


class CommentItem extends React.Component<CommentItemProps, any> {
    onPraisePress = () => {
        if (this.props.onPraisePress) {
            this.props.onPraisePress(this.props.item)
        }
    };

    onDeletePraisePress = () => {
        this.props.onDeletePress&&this.props.onDeletePress(this.props.item);
    };
    //获取赞的数量
    getPraiseCount = () => {
        if (!this.props.item.praise) return 0;
        return this.props.item.praise.counts;
    };


    //获取用户赞的标志
    getPraiseFlag = () => {
        let flag = false;
        if (this.props.item.praise) {
            if (Array.isArray(this.props.item.praise.praiseDTOList)) {
                this.props.item.praise.praiseDTOList.map((item: praiseDTO) => {
                    if (Number(item.userId) === Number(this.props.auth.userInfo.id)) {
                        flag = true;
                    }
                })
            }
        }
        return flag;
    };

    render() {

        const {item} = this.props;

        return (
            <View style={[{backgroundColor: '#fff'}, this.props.style]}>
                <View style={[commonStyles.listItem, commentStyles.item, commonStyles.relative]}>
                    <Avatar source={{uri: item.user.avatar}}/>
                    <View style={[commonStyles.flexColumn, commentStyles.leftContent]}>
                        {/*用户名*/}
                        <MyText numberOfLines={1} style={commentStyles.name}>{item.user.nickName}</MyText>
                        {/*地点*/}
                        <MyText numberOfLines={1}
                                style={commentStyles.sub}>{item.user.company ? item.user.company.name : ''}</MyText>
                        {/*时间*/}
                        <MyText numberOfLines={1} style={commentStyles.time}>{item.created}</MyText>

                        {/*评论内容*/}
                        <MyText numberOfLines={0} style={commentStyles.content}>{item.content}</MyText>
                        <Line style={{width: SCREEN_WIDTH - 60}}/>

                        {/*<TouchableOpacity style={{marginBottom: 6}}>*/}
                        {/*<MyText numberOfLines={0} style={{padding: 5}}>查看翻译</MyText>*/}
                        {/*</TouchableOpacity>*/}
                        <View style={[commonStyles.flexRow, {padding: 10, justifyContent: 'space-between', marginRight:10}]}>
                            <TouchableOpacity onPress={this.onPraisePress}>
                                <MyText
                                    numberOfLines={0}
                                    style={[this.getPraiseFlag() ? dynamicStyles.isLiked : null]}>{`${this.getPraiseCount()}赞`}</MyText>
                            </TouchableOpacity>
                            <TouchableOpacity onPress={this.onDeletePraisePress}>
                                <MyText
                                    color={Colors.Danger}>{this.props.item.user.id === this.props.auth.userInfo.id && '删除'}</MyText>
                            </TouchableOpacity>
                        </View>
                    </View>
                </View>
                <Line style={{marginTop:-13}}/>
            </View>
        );
    }
}


export default connect(
    ({auth}) => ({auth})
)(CommentItem);